<div class="container-fluid">
  <hr/>
  <div class="row">
    <div class="col-md-12">
      <form name="form" ng-submit="filter()">
        <div class="form-group">

          <div class="col-md-3">
            <label>User</label>
            <input type="text" class="form-control" ng-model="query.user">
          </div>
          <div class="col-md-3">
            <label>Operation</label>
            <select class="form-control" ng-model="query.operation">
              <option>--Select Operation--</option>
              <option value="3">Create</option>
              <option value="0">Read</option>
              <option value="1">Update</option>
              <option value="2">Delete</option>
              <option value="4">Command</option>
            </select>
          </div>

          <div class="col-md-3">
            <label>Date from</label>

            <div class="input-group date" ng-model='query.from'>
              <input type='text' class='form-control' ng-model='query.from'
                     data-date-format="dd/MM/yyyy" bs-datepicker orientdate/>
                <span class="input-group-btn">
                    <button class="btn btn-default">
                      <i class="fa fa-calendar">
                      </i>
                    </button>
                </span>
              <input data-time-format="HH:mm" class="form-control" orientdatetime bs-timepicker
                     ng-model='query.from' type="text"/>
              <span class="input-group-btn">
                  <button class="btn btn-default">
                    <i class="fa fa-clock-o">
                    </i>
                  </button>
              </span>
            </div>

          </div>
          <div class="col-md-3">
            <label>Date To</label>

            <div class="input-group date" ng-model='query.to'>
              <input type='text' class='form-control' ng-model='query.to'
                     data-date-format="dd/MM/yyyy" bs-datepicker orientdate/>
                <span class="input-group-btn">
                    <button class="btn">
                      <i class="fa fa-calendar">
                      </i>
                    </button>
                </span>
              <input data-time-format="HH:mm" class="form-control" orientdatetime bs-timepicker
                     ng-model='query.to' type="text"/>
              <span class="input-group-btn">
                  <button class="btn">
                    <i class="fa fa-clock-o">
                    </i>
                  </button>
              </span>
            </div>
          </div>
          <div class="col-md-3">
            <label>Note</label>
            <input type="text" class="form-control" ng-model="query.note">
          </div>
          <div class="col-md-3">
            <label>Record</label>
            <input type="text" class="form-control" ng-model="query.record">
          </div>

          <div class="col-md-3">
            <label>Limit</label>
            <input type="number" class="form-control" ng-model="query.limit">
          </div>

          <div class="col-md-3">
            <br/>
            <div class="btn-group">
              <button class="btn btn-sm btn-default" ng-click="resetFilter()"><i class="fa fa-eraser"> </i>
                Clear Filter
              </button>
            </div>
            <div class="btn-group">
              <button class="btn btn-sm btn-default"  type="submit"><i class="fa fa-search"> </i>
                Search</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <hr/>

  <div class="row">
    <div class="col-md-12">
      <!--<table ng-table="tableParams" class="table">-->
        <!--<thead>-->
        <!--<tr>-->

          <!--<th>-->
            <!--User-->
          <!--</th>-->
          <!--<th>-->
            <!--Date-->
          <!--</th>-->
          <!--<th>-->
            <!--Operation-->
          <!--</th>-->
          <!--<th>-->
            <!--Record-->
          <!--</th>-->
          <!--<th>-->
            <!--Note-->
          <!--</th>-->
        <!--</tr>-->
        <!--</thead>-->

        <!--<tbody>-->
        <!--<tr ng-repeat="log in logs">-->
          <!--<td>-->
            <!--{{log.user.name}}-->
          <!--</td>-->
          <!--<td>-->
            <!--{{log.date}}-->
          <!--</td>-->
          <!--<td>-->
            <!--{{log.operation | operation}}-->
          <!--</td>-->
          <!--<td>-->
            <!--{{log.record}}-->
          <!--</td>-->
          <!--<td>-->
            <!--{{log.note}}-->
          <!--</td>-->
        <!--</tr>-->
        <!--</tbody>-->
      <!--</table>-->

      <table ng-table="tableParams" class="table">
        <thead>
        <tr>

          <th>
            User
          </th>
          <th>
            Date
          </th>
          <th>
            Operation
          </th>
          <th>
            Record
          </th>
          <th>
            Note
          </th>
          <th>
            Changes
          </th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="log in $data">
          <td>
            {{log.user.name}}
          </td>
          <td>
            {{log.date}}
          </td>
          <td>
            {{log.operation | operation}}
          </td>
          <td>
            {{log.record}}
          </td>
          <td>
            {{log.note}}
          </td>
          <td>
            {{log.changes}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
